<template>
    <input class="todo_input" 
    placeholder="请输入待办事项"
    v-model="todoTitle"
    @keydown.enter="addNewTodoItem"/>
</template>

<script setup>
    import { ref } from 'vue';
    import { nanoid } from 'nanoid';
    import {TodoTask} from '@/entities/TodoTask';

    const emit = defineEmits(["add-new-todo-item"])
    let todoTitle = ref("")
    function addNewTodoItem(event) {
       if (todoTitle.value) {
            let todoTask = new TodoTask(nanoid(), todoTitle.value, false)
            console.log(todoTask)
            emit('add-new-todo-item', todoTask)
            todoTitle.value = ""
       } 
    }
</script>

<style scoped>
    .todo_input {
        box-sizing: border-box;
        height: 40px;
        width: 96%;
        font-size: 18px;
        margin: 12px 0px;
        padding: 10px 10px;
    }

</style>@/entities/TodoTask